<template>
    <div class="big_box" :model="from">
        <el-form class="demo-form-inline" label-width="140px">
            <!--            <el-row :gutter="24" class="row-bg">-->
            <!--                <el-col :span="3">-->
            <!--                    <el-select required placeholder="请选择类型" v-model="from.ModuleNumber">-->
            <!--                        <el-option :value="0" label="请选择类型">请选择类型</el-option>-->
            <!--                        <el-option value="020200" label="支付管理">支付管理</el-option>-->
            <!--                        <el-option value="020300" label="报销管理">报销管理</el-option>-->
            <!--                        <el-option value="020400" label="开票管理">开票管理</el-option>-->
            <!--                        <el-option value="030200" label="申购列表">申购列表</el-option>-->
            <!--                        <el-option value="030100" label="采购列表">采购列表</el-option>-->
            <!--                        <el-option value="050600" label="入库单">入库单</el-option>-->
            <!--                        <el-option value="050700" label="出库单">出库单</el-option>-->
            <!--                        <el-option value="051000" label="归还单">归还单</el-option>-->
            <!--                        <el-option value="160200" label="公章审核单">公章审核单</el-option>-->
            <!--                    </el-select>-->
            <!--                </el-col>-->
            <!--                <el-col :span="3">-->
            <!--                    <el-date-picker v-model="from.Start"-->
            <!--                                    style="width:90%"-->
            <!--                                    type="date"-->
            <!--                                    placeholder="开始时间">-->
            <!--                    </el-date-picker>-->
            <!--                </el-col>-->
            <!--                <el-col :span="3">-->
            <!--                    <el-date-picker v-model="from.End"-->
            <!--                                    style="width:90%"-->
            <!--                                    type="date"-->
            <!--                                    placeholder="结束时间">-->
            <!--                    </el-date-picker>-->
            <!--                </el-col>-->

            <!--                <el-col :span="1">-->
            <!--                    <el-button icon="el-icon-search" size="medium" style="width:100px" @click="GetAuditRuleDetail()">-->
            <!--                        搜索-->
            <!--                    </el-button>-->
            <!--                </el-col>-->
            <!--            </el-row>-->
            <el-row style="padding:10px">
                <el-col>
                    <el-button-group>
                        <!--                        <el-button class="buttongroup" type="danger" icon="el-icon-delete" @click="DelArray">批量删除-->
                        <!--                        </el-button>-->
                        <el-button class="buttongroup" type="success" icon="el-icon-circle-plus-outline"
                                   @click="AddAuditRule">添加
                        </el-button>
                        <el-button class="buttongroup" type="success"
                                   @click="GetAuditRuleDetail">刷新
                        </el-button>
                        <el-button class="buttongroup" type="success"
                                   @click="doFlowChart('big')">流程图
                        </el-button>
                    </el-button-group>
                </el-col>
            </el-row>
            <el-collapse style="width: 100%">
                <el-collapse-item v-for="(item,index) in data.showData" :name="item.key"
                                  :key="index" style="width: 100%;overflow: auto">
                    <template slot="title" style="width: 100%">
                        <el-row style="width: 100%">
                            <el-col :span="12">
                                {{item.title}}
                            </el-col>
                            <el-col :span="11" style="text-align: right">
                                <el-button type="success" class="BtnSize" size="mini" plain
                                           @click.stop="doFlowChart(item.key)">流程图
                                </el-button>
                            </el-col>
                        </el-row>
                    </template>
                    <el-table :data="item.children"
                              style="width: 100%"
                              ref="multipleTable"
                              border>
                        <el-table-column header-align="center" fixed type="index" label="序号" align="center"
                                         :index="_indexMethod"></el-table-column>
                        <el-table-column header-align="center" fixed prop="ModuleNumber" label="模块名称" align="center"
                                         width="130">
                            <template slot-scope="scope">
                                <label v-if="scope.row.ModuleNumber=='020200'"> 支付管理 </label>
                                <label v-else-if="scope.row.ModuleNumber=='020300'">报销管理 </label>
                                <label v-else-if="scope.row.ModuleNumber=='020400'">开票管理 </label>
                                <label v-else-if="scope.row.ModuleNumber=='030200'">申购列表 </label>
                                <label v-else-if="scope.row.ModuleNumber=='030100'">采购列表 </label>
                                <label v-else-if="scope.row.ModuleNumber=='050600'">入库单 </label>
                                <label v-else-if="scope.row.ModuleNumber=='050700'">出库单 </label>
                                <label v-else-if="scope.row.ModuleNumber=='051000'">归还单 </label>
                                <label v-else-if="scope.row.ModuleNumber=='160200'">公章审核单 </label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" fixed prop="SponsorUser" label="发起人员" align="center">
                            <template slot-scope="scope">
                                <label>{{_UserIdNameByIds(scope.row.SponsorUser)}}</label>
                            </template>
                        </el-table-column>

                        <el-table-column header-align="center" fixed prop="SponsorDepart" label="发起部门" align="center"
                                         :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <label>{{_DepartmentNamesByIds(scope.row.SponsorDepart) }}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" fixed prop="AuditUserId1" label="第一审批人" align="center">
                            <template slot-scope="scope">
                                {{_UserNameById(scope.row.AuditUserId1)}}
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" fixed prop="AuditUserId2" label="第二审批人" align="center">
                            <template slot-scope="scope">
                                {{_UserNameById(scope.row.AuditUserId2)}}
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" fixed prop="AuditUserId3" label="第三审批人" align="center">
                            <template slot-scope="scope">
                                {{_UserNameById(scope.row.AuditUserId3)}}
                            </template>
                        </el-table-column>

                        <el-table-column header-align="center" fixed prop="AuditUserId4" label="第四审批人" align="center">
                            <template slot-scope="scope">
                                {{_UserNameById(scope.row.AuditUserId4)}}
                            </template>
                        </el-table-column>

                        <el-table-column header-align="center" fixed prop="AuditUserId5" label="第五审批人" align="center">
                            <template slot-scope="scope">
                                {{_UserNameById(scope.row.AuditUserId5)}}
                            </template>
                        </el-table-column>

                        <el-table-column header-align="center" fixed prop="AuditUserId6" label="第六审批人" align="center">
                            <template slot-scope="scope">
                                {{_UserNameById(scope.row.AuditUserId6)}}
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" fixed prop="CCPerson" label="抄送人" align="center"
                                         :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                {{_UserIdNameByIds(scope.row.CCPerson)}}
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" width="300" fixed prop="CategoryDescript" label="操作"
                                         align="center">
                            <template slot-scope="scope">
                                <el-button type="info" class="BtnSize" size="mini" plain @click="edit(scope.row)">编辑
                                </el-button>
                                <el-button type="warning" class="BtnSize" size="mini" plain @click="Revoke(scope.row)">
                                    撤销
                                </el-button>
                                <el-button type="danger" class="BtnSize" size="mini" plain @click="DeleById(scope.row)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
            </el-collapse>

            <!--            <el-row :span="20" :offset="2" style="margin-top: 10px">-->
            <!--                <el-col>-->
            <!--                    <el-table :data="tableData"-->
            <!--                              style="width: 100%"-->
            <!--                              ref="multipleTable"-->
            <!--                              @selection-change="SelectionChange_event"-->
            <!--                              border>-->
            <!--                        <el-table-column header-align="center" type="selection" width="50"-->
            <!--                                         align="center"></el-table-column>-->
            <!--                        <el-table-column header-align="center" fixed type="index" label="序号" align="center"-->
            <!--                                         :index="_indexMethod"></el-table-column>-->
            <!--                        <el-table-column header-align="center" fixed prop="ModuleNumber" label="模块名称" align="center"-->
            <!--                                         width="130">-->
            <!--                            <template slot-scope="scope">-->
            <!--                                <label v-if="scope.row.ModuleNumber=='020200'"> 支付管理 </label>-->
            <!--                                <label v-else-if="scope.row.ModuleNumber=='020300'">报销管理 </label>-->
            <!--                                <label v-else-if="scope.row.ModuleNumber=='020400'">开票管理 </label>-->
            <!--                                <label v-else-if="scope.row.ModuleNumber=='030200'">申购列表 </label>-->
            <!--                                <label v-else-if="scope.row.ModuleNumber=='030100'">采购列表 </label>-->
            <!--                                <label v-else-if="scope.row.ModuleNumber=='050600'">入库单 </label>-->
            <!--                                <label v-else-if="scope.row.ModuleNumber=='050700'">出库单 </label>-->
            <!--                                <label v-else-if="scope.row.ModuleNumber=='051000'">归还单 </label>-->
            <!--                                <label v-else-if="scope.row.ModuleNumber=='160200'">公章审核单 </label>-->
            <!--                            </template>-->
            <!--                        </el-table-column>-->
            <!--                        <el-table-column header-align="center" fixed prop="SponsorUser" label="发起人员" align="center">-->
            <!--                            <template slot-scope="scope">-->
            <!--                                <label>{{_UserIdNameByIds(scope.row.SponsorUser)}}</label>-->
            <!--                            </template>-->
            <!--                        </el-table-column>-->

            <!--                        <el-table-column header-align="center" fixed prop="SponsorDepart" label="发起部门" align="center"-->
            <!--                                         :show-overflow-tooltip="true">-->
            <!--                            <template slot-scope="scope">-->
            <!--                                <label>{{_DepartmentNamesByIds(scope.row.SponsorDepart) }}</label>-->
            <!--                            </template>-->
            <!--                        </el-table-column>-->
            <!--                        <el-table-column header-align="center" fixed prop="AuditUserId1" label="第一审批人" align="center">-->
            <!--                            <template slot-scope="scope">-->
            <!--                                {{_UserNameById(scope.row.AuditUserId1)}}-->
            <!--                            </template>-->
            <!--                        </el-table-column>-->
            <!--                        <el-table-column header-align="center" fixed prop="AuditUserId2" label="第二审批人" align="center">-->
            <!--                            <template slot-scope="scope">-->
            <!--                                {{_UserNameById(scope.row.AuditUserId2)}}-->
            <!--                            </template>-->
            <!--                        </el-table-column>-->
            <!--                        <el-table-column header-align="center" fixed prop="AuditUserId3" label="第三审批人" align="center">-->
            <!--                            <template slot-scope="scope">-->
            <!--                                {{_UserNameById(scope.row.AuditUserId3)}}-->
            <!--                            </template>-->
            <!--                        </el-table-column>-->

            <!--                        <el-table-column header-align="center" fixed prop="AuditUserId4" label="第四审批人" align="center">-->
            <!--                            <template slot-scope="scope">-->
            <!--                                {{_UserNameById(scope.row.AuditUserId4)}}-->
            <!--                            </template>-->
            <!--                        </el-table-column>-->

            <!--                        <el-table-column header-align="center" fixed prop="AuditUserId5" label="第五审批人" align="center">-->
            <!--                            <template slot-scope="scope">-->
            <!--                                {{_UserNameById(scope.row.AuditUserId5)}}-->
            <!--                            </template>-->
            <!--                        </el-table-column>-->

            <!--                        <el-table-column header-align="center" fixed prop="AuditUserId6" label="第六审批人" align="center">-->
            <!--                            <template slot-scope="scope">-->
            <!--                                {{_UserNameById(scope.row.AuditUserId6)}}-->
            <!--                            </template>-->
            <!--                        </el-table-column>-->
            <!--                        <el-table-column header-align="center" fixed prop="CCPerson" label="抄送人" align="center"-->
            <!--                                         :show-overflow-tooltip="true">-->
            <!--                            <template slot-scope="scope">-->
            <!--                                {{_UserIdNameByIds(scope.row.CCPerson)}}-->
            <!--                            </template>-->
            <!--                        </el-table-column>-->
            <!--                        <el-table-column header-align="center" width="300" fixed prop="CategoryDescript" label="操作"-->
            <!--                                         align="center">-->
            <!--                            <template slot-scope="scope">-->
            <!--                                <el-button type="success" class="BtnSize" size="mini" plain-->
            <!--                                           @click="DEleById(scope.row)">流程图-->
            <!--                                </el-button>-->
            <!--                                <el-button type="info" class="BtnSize" size="mini" plain @click="edit(scope.row)">编辑-->
            <!--                                </el-button>-->
            <!--                                <el-button type="warning" class="BtnSize" size="mini" plain @click="Revoke(scope.row)">-->
            <!--                                    撤销-->
            <!--                                </el-button>-->
            <!--                                <el-button type="danger" class="BtnSize" size="mini" plain @click="DeleById(scope.row)">-->
            <!--                                    删除-->
            <!--                                </el-button>-->
            <!--                            </template>-->
            <!--                        </el-table-column>-->
            <!--                    </el-table>-->
            <!--                </el-col>-->
            <!--                <el-col :span="24">-->
            <!--                    <div class="block" style="float: right">-->
            <!--                        <el-pagination @size-change="GetAuditRuleDetail"-->
            <!--                                       @current-change="GetAuditRuleDetail"-->
            <!--                                       :current-page.sync="pagination.currentPage"-->
            <!--                                       :page-sizes="pagination.pagesizes"-->
            <!--                                       :page-size.sync="pagination.pagesize"-->
            <!--                                       layout="total, sizes, prev, pager, next, jumper"-->
            <!--                                       :total.sync="pagination.total">-->
            <!--                        </el-pagination>-->
            <!--                    </div>-->
            <!--                </el-col>-->
            <!--            </el-row>-->
        </el-form>


        <el-dialog :visible.sync="AddAuditRuleShow" title="添加审批规则" width="80%">
            <AddAuditRule :AllDepartment="AllDepartment"
                          :AllUsers="AllUsers">
            </AddAuditRule>
        </el-dialog>

        <el-dialog :visible.sync="UpAuditRuleShow" title="编辑审批规则" width="80%">
            <UpAuditRule :AllDepartment="AllDepartment"
                         :AllUsers="AllUsers"
                         :UpAuditRuleDB="UpAuditRuleDB">
            </UpAuditRule>
        </el-dialog>

        <el-dialog :visible.sync="data.flowChart.show" v-if="data.flowChart.show" :title="data.flowChart.title"
                   width="100%" top="0">
            <FlowChart :AllData="data.flowChart.data"/>
        </el-dialog>


    </div>
</template>

<script>
    import * as publicjs from "/public/Scriput/Public"

    import AddAuditRule from "./AddAuditRule";
    import UpAuditRule from "./UpAuditRule";
    import FlowChart from "../../FlowChart"


    export default {
        name: 'AuditRule',
        components: {
            AddAuditRule: AddAuditRule,
            UpAuditRule: UpAuditRule,
            FlowChart: FlowChart
        },

        data() {
            return {
                //页面开关按钮
                AddAuditRuleShow: false,
                UpAuditRuleShow: false,
                from: {
                    ModuleNumber: '',
                    Start: '',
                    End: '',
                },
                SelectMore_lis: [],
                //数据表格获取信息
                tableData: [],
                data: {
                    showData: {},
                    data: {},
                    flowChart: {
                        show: false,
                        title: "",
                        data: {},
                    }
                },
                AllUsers: [],
                AllDepartment: [],

                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 1000000,
                    total: 0
                },
                UpAuditRuleDB: {},
            }
        },
        created() {
            this.AllUsers = publicjs.GetCompanyAllUsers(this.$http);
            this.AllDepartment = publicjs.GetAllDepartment(this.$http);
            this.GetAuditRuleDetail();
        },
        methods: {
            AddAuditRule() {
                this.AddAuditRuleShow = true;
            },
            //序号
            _indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },

            GetAuditRuleDetail() {
                this.$http.post("/Right/GetAuditRuleDetail",
                    {
                        from: this.from,
                        currentPage: this.pagination.currentPage,
                        pagesize: this.pagination.pagesize,
                    }).then(res => {
                    // this.tableData = res.data.data;
                    // this.pagination.total = res.data.count;
                    this.doGetShowData(res.data.data);
                });
            },

            doGetShowData(data1) {
                let showData = {}, ModuleNumber = {
                    "020200": "支付管理",
                    "020300": "报销管理",
                    "020400": "开票管理",
                    "030200": "申购列表",
                    "030100": "采购列表",
                    "050600": "入库单",
                    "050700": "出库单",
                    "051000": "归还单",
                    "160200": "公章审核单",
                }, data = {
                    title: "固远晨通审批规则流程图",
                    titleBackground: "",
                    titleColor: "",
                    key: "big",
                    subTitle: "",
                    subTitleBackground: "",
                    subTitleColor: "",
                    children: []
                };
                for (let i = 0; i < data1.length; i++) {
                    let item = data1[i];
                    if (showData[item.ModuleNumber]) {
                        showData[item.ModuleNumber].children.push(item);
                    } else {
                        showData[item.ModuleNumber] = {
                            title: ModuleNumber[item.ModuleNumber],
                            key: item.ModuleNumber,
                            children: [item]
                        }
                    }
                }
                for (let k in showData) {
                    let children = [];
                    for (let i = 0; i < showData[k].children.length; i++) {
                        let item = showData[k].children[i]
                        children.push({
                            title: "条件：",
                            titleBackground: "",
                            titleColor: "green",
                            subTitle: "发起人员：" + (item.SponsorUser ? this._UserIdNameByIds(item.SponsorUser) : "") +
                                "<br/>发起部门：" + (item.SponsorDepart ? this._DepartmentNamesByIds(item.SponsorDepart) : "")
                            ,
                            subTitleBackground: "",
                            subTitleColor: "",
                            key: showData[k].key + "_" + item.Id + "_condition",
                            children: []
                        })
                        for (let l = 1; l < 7; l++) {
                            if (item["AuditUserId" + l]) {
                                children[children.length - 1].children = this.doChildrenData(children[children.length - 1].children,
                                    {
                                        title: "审批人：",
                                        titleBackground: "#FF943E",
                                        titleColor: "white",
                                        subTitle: this._UserNameById(item["AuditUserId" + l]),
                                        subTitleBackground: "",
                                        subTitleColor: "",
                                        key: showData[k].key + "_" + item.Id + "_AuditUserId" + l,
                                        children: []
                                    }, "children")
                            }
                        }
                        children[children.length - 1].children = this.doChildrenData(children[children.length - 1].children,
                            {
                                title: "抄送人：",
                                titleBackground: "#3296FA",
                                titleColor: "white",
                                subTitle: this._UserIdNameByIds(item["CCPerson"]),
                                subTitleBackground: "",
                                subTitleColor: "",
                                key: showData[k].key + "_" + item.Id +"_CCPerson",
                                children: []
                            }, "children")
                    }
                    data.children.push({
                        title: showData[k].title,
                        titleBackground: "",
                        titleColor: "",
                        subTitle: "",
                        subTitleBackground: "",
                        subTitleColor: "",
                        key: showData[k].key,
                        children: children,
                    })
                }
                this.data = {
                    showData: showData,
                    data: data,
                    flowChart: {
                        show: false,
                        title: "",
                        data: {},
                    }
                }
            },
            doChildrenData(data, children, key) {
                if (data.length) {
                    data[0][key] = this.doChildrenData(data[0][key], children, key);
                } else {
                    data = [children];
                }
                return data;
            },
            doFlowChart(key) {
                if (key === "big") {
                    this.data.flowChart = {
                        show: true,
                        title: "固远晨通审批规则_流程图",
                        data: this.data.data,
                    }
                } else {
                    for (let i = 0; i < this.data.data.children.length; i++) {
                        if (this.data.data.children[i].key === key) {
                            this.data.flowChart = {
                                show: true,
                                title: this.data.data.children[i].title + "_流程图",
                                data: this.data.data.children[i],
                            }
                            break;
                        }
                    }
                }
            },
            edit(obj) {
                this.$http.get("/Right/UpdateAuditRuleBit?id=" + obj.Id).then(res => {
                    if (res.data.mes.IsSuccess) {
                        this.UpAuditRuleShow = true;
                        //var CCPersonArray = obj.CCPerson.split(',')
                        //var SponsorDepartArray = obj.SponsorDepart.split(',')
                        //var SponsorUserArray = obj.SponsorUser.split(',')
                        var Tobj = JSON.parse(JSON.stringify(obj));
                        Tobj.SponsorUser = !Tobj.SponsorUser || Tobj.SponsorUser === "NaN" ? [] : this.IntAttTostrarr(Tobj.SponsorUser)
                        Tobj.CCPerson = !Tobj.CCPerson || Tobj.CCPerson === "NaN" ? [] : this.IntAttTostrarr(Tobj.CCPerson);
                        Tobj.SponsorDepart = !Tobj.SponsorDepart || Tobj.SponsorDepart === "NaN" ? [] : this.IntAttTostrarr(Tobj.SponsorDepart);
                        this.UpAuditRuleDB = Tobj;
                    } else {
                        this.$message.error(res.data.mes.Msg)
                    }
                });
            },
            //表格数据选择事件
            SelectionChange_event(value) {
                this.SelectMore_lis = value
            },
            //删除
            DeleById(obj) {
                this.SelectMore_lis = [];
                this.SelectMore_lis.push(obj);
                this.DelArray();
            },
            //批量删除
            DelArray() {
                this.$confirm('你确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(res => {
                    let arrDel = []
                    if (this.SelectMore_lis.length > 0) {
                        this.SelectMore_lis.forEach(item => {
                            arrDel.push(item.Id)
                        })
                        this.$http.post('/Right/DeleteAuditRule', arrDel).then(res => {
                            if (res.data.IsSuccess) {
                                this.$message.success('删除成功!')
                                this.SelectMore_lis = []
                                this.GetAuditRuleDetail()
                            } else {
                                this.$message.error(res.data.Msg)
                            }
                        }).catch(() => {
                            this.$message.info('服务器异常,请联系管理员!')
                        })
                    } else {
                        this.$message.warning('没有选中的数据!')
                    }
                });


            },
            //表格字节转换开始
            _UserNameById(obj) {
                return publicjs.GetUserNameById(obj);
            },
            //用于构造人员多选的字符串
            _UserIdNameByIds(data) {
                var result = [];
                if (data != null && data.length > 0) {
                    var arr = data.split(',');
                    for (var i = 0; i < arr.length; i++) {
                        var user = this.AllUsers.find((x) => x.Id == arr[i]);
                        if (user != null) {
                            result.push(user.UserName);
                        }
                    }
                    return result.join(',');
                }
                return "";
            },

            _DepartmentNamesByIds(data) {
                var result = [];
                if (data != null && data.length > 0) {
                    var arr = data.split(',');
                    for (var i = 0; i < arr.length; i++) {
                        var Department = this.AllDepartment.find((x) => x.Id == arr[i]);
                        if (Department != null) {
                            result.push(Department.DepartmentName);
                        }
                    }
                    return result.join(',');
                }
                return ""
            },
            //表格字节转换结束

            //撤销
            Revoke(obj) {
                this.$confirm('确认撤销吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(res => {
                    this.$http.post("/Right/RevokeAuditRule", {Id: obj.Id}).then(res => {
                        if (res.data.mes.IsSuccess) {
                            this.GetAuditRuleDetail();
                            this.$message.success(res.data.mes.Msg)
                        } else {
                            this.$message.error(res.data.mes.Msg)
                        }
                    });
                })

            },

            //转化为数组
            IntAttTostrarr(objstr) {
                if (objstr != null) {
                    var objarray = objstr.split(',');
                    var Intarray = [];
                    for (var i = 0; i < objarray.length; i++) {
                        Intarray.push(parseInt(objarray[i]));
                    }
                    return Intarray;
                }
            },
        }
    };
</script>

<style>
    .big_box {
        padding: 15px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .buttongroup {
        margin-right: 5px !important;
        border-radius: 4px !important;
    }

    .DialogTable {
        position: fixed;
    }
</style>

